import { Link, graphql, useStaticQuery } from 'gatsby';
import React from 'react';
import { nav, mark, alignRight } from './layout.module.css';

export default function Header() {
  const data = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          title
          description
          author
        }
      }
    }
  `);

  return (
    <>
      <header>
        <nav className={nav}>
          <Link to="/">首页</Link>
          <Link to="/person/zhangsan">zhangsan</Link>
          <Link to="/person/lisi">lisi</Link>
          <Link to="/product">产品</Link>
          <Link to="/list">文章列表</Link>
        </nav>{' '}
        <div className={mark}>
          <h1>{data.site.siteMetadata.title}</h1>
          <mark>{data.site.siteMetadata.description}</mark>
          <p className={alignRight}>—— {data.site.siteMetadata.author}</p>
        </div>
      </header>
    </>
  );
}
